
"use strict";
// Template
var template = currentExecutingScript().ownerDocument.querySelector('#graphTemplate');
// Graph Div
var graphDiv = template.content.querySelector('#graph');
// Graph svg, graph 布局
var graph;
// 标签源
var proto = Object.create(HTMLElement.prototype);
// option 属性
Object.defineProperty(proto,'option',{
    set: function(newOption){
        this.graphOption = newOption;
    },
    get: function(){
        return this.graphOption;
    }
});
// 创建元素实例
proto.createdCallback = function(){
    // TODO
};
// 向文档插入实例
proto.attachedCallback = function(){
    var layout = this.option.layout? this.option.layout:'forceSimulation';
    var graphDom =  d3.select(graphDiv)
                .append("svg")
                .attr("id","outSvg")
                .style('cursor','pointer');
    switch (layout) {
        case 'forceSimulation':
            graph = ForceSimulation(graphDom,this.option);
            break;
        default:
    }
    this.createShadowRoot().appendChild(template.content);
};

// 重置Graph大小
proto.resize = function(width,height){
    if(graph && typeof graph.resize === 'function'){
        graph.resize(width,height);
    }
};
// 指定Graph力强度
proto.assignStrength = function(strength){
    if(graph && typeof graph.assignStrength === 'function'){
        graph.assignStrength(strength);
    }
};
// 指定Graph斥力
proto.assignCharge = function(charge){
    if(graph && typeof graph.assignCharge === 'function'){
        graph.assignCharge(charge);
    }
};
// 指定Graph线长度
proto.assignDistance = function(distance){
    if(graph && typeof graph.assignDistance === 'function'){
        graph.assignDistance(distance);
    }
};
// 重置brush
proto.showBrush = function(brushFlag){
    if(graph && typeof graph.showBrush === 'function'){
        graph.showBrush(brushFlag);
    }
};
// 选中数据
proto.selectedData = function(data){
    if(graph && typeof graph.selectedData === 'function'){
        graph.selectedData(data);
    }
};
// 清空图
proto.clear = function(){
    if(graph && typeof graph.clear === 'function'){
        graph.clear();
    }
};
// 添加数据
proto.setData = function(data){
    if(graph && typeof graph.setData === 'function'){
        graph.setData(data);
    }
};
// 追加数据
proto.appendData = function(data){
    if(graph && typeof graph.appendData === 'function'){
        graph.appendData(data);
    }
};
// 设置中心点
proto.setGraphCenter = function(x,y){
    if(graph && typeof graph.setGraphCenter === 'function'){
        graph.setGraphCenter(x,y);
    }
};
// 还原缩放
proto.resetGraphZoom = function(){
    if(graph && typeof graph.resetGraphZoom === 'function'){
        graph.resetGraphZoom();
    }
};
// Graph 对象
var CanvasGraph = document.registerElement('canvas-graph', {prototype: proto});
